* {
    margin: 0;
    padding: 0;
}
#back,#full{
    opacity: 0;
    display: none;
    user-select: none;
}

#back,#full,#bgmOF,#feedOF:hover{
    display: block;
    user-select: none;
}
.back {
    position:absolute;
    top:0;
    left:0;
    display: none;
    height: 20px;
    width: 20px;
    float: left;
    margin-left: 8px;
    margin-top: 5px;
    font-size: 20px;
    user-select: none;
    color: #ffffff;
}
.full{
    position:absolute;
    top:0;
    right:0;
    display: none;
    height: 20px;
    width: 20px;
    float: right;
    margin-right: 10px;
    margin-top: 3px;
    font-size: 20px;
    user-select: none;
    color: #ffffff;
}
.text{
    opacity: 0;
    text-align:center;
    right: 0;
    top:0;
    left: 0;
    box-sizing:border-box ;
    display: none;
    height: 20px;
    width: 100%;
    font-size: 17px;
    font-family:sans-serif;
    margin-top: 290px;
    position: absolute;
    user-select:none;
    color: #ffffff;
    /*word-wrap: break-word;*/
    word-break: keep-all;
}
.outer{

    height:100%;
    display: block;
    cursor: pointer;
    width: 100%;
    position: relative;
}
.color{

    height:100%;
    display: block;
    cursor: pointer;
    width: 100%;
    position: absolute;
    right: 0;
    top: 0;

    opacity: 1;
}
.color1{
    display: block;
    cursor: pointer;
    right: 0;
    opacity: 1;
    height: 100%;
    width:100%;
    position: absolute;
    left: 0;top: 0;
    background-color: #FFAFAF
}

.change{
    display: block;
    cursor: pointer;
    opacity: 1;
    position: absolute;


}

#change1,#change2,#change3,#change4{
    height: 100%;
    width:0;
    left: 0;
    top: 0;
}

#change5,#change6,#change7,#change8{
    right: 0;
    height: 100%;
    width: 0;
    top: 0;
}


#change9,#change10,#change11,#change12{
    right: 0;
    height: 0;
    width: 100%;
    left: 0;
    top: 0;
}

#change13,#change14,#change15,#change16{
    right: 0;
    height: 0;
    width: 100%;
    left: 0;
    top: 0;
}

.bgmOF{
    opacity: 0;
    font-size: 13px;
    left: 0;
    right: 0;
    top: 0;
    text-align:center;
    position: absolute;
    font-family:sans-serif;
    display: none;
    user-select: none;
    color: #ffffff;
    width: 200px;
    margin:auto;
    margin-top: 365px
}
.feedOF{
    width: 200px;
    opacity: 0;
    margin:auto;
    margin-top:392px;
    top: 0;
    text-align:center;
    font-size: 13px;
    position: absolute;
    font-family:sans-serif;
    display: none;
    left: 0;
    right: 0;
    user-select: none;
    color: #ffffff;
}

#box0:active {
    animation:move1 0.25s ease ,move2 0.25s ease;
}
#box1:active {
    animation:move1 0.25s ease ,move2 0.25s ease;
}
#box2:active {
    animation:move1 0.25s ease ,move2 0.25s ease;
}
#box3:active {
    animation:move1 0.25s ease ,move2 0.25s ease;
}
#box4:active {
    animation:move1 0.25s ease ,move2 0.25s ease;
}
#box5:active {
    animation:move1 0.25s ease ,move2 0.25s ease;
}
#box6:active {
    animation:move1 0.25s ease ,move2 0.25s ease;
}
#box7:active {
    animation:move1 0.25s ease ,move2 0.25s ease;
}
#box8:active {
    animation:move1 0.25s ease ,move2 0.25s ease;
}
#box9:active {
    animation:move1 0.25s ease ,move2 0.25s ease;
}
#box10:active {
    animation:move1 0.25s ease ,move2 0.25s ease;
  }
#box11:active {
    animation:move1 0.25s ease ,move2 0.25s ease;
}
#box12:active {
    animation:move1 0.25s ease ,move2 0.25s ease;
}

#box13:active {
    animation:move1 0.25s ease ,move2 0.25s ease;
}
#box14:active {
    animation:move1 0.25s ease ,move2 0.25s ease;
}
#box15:active {
    animation:move1 0.25s ease ,move2 0.25s ease;
}
#box16:active {
    animation:move1 0.25s ease ,move2 0.25s ease;
}
#box17:active {
    animation:move1 0.25s ease ,move2 0.25s ease;
}
#box18:active {
    animation:move1 0.25s ease ,move2 0.25s ease;
}
#box19:active {
    animation:move1 0.25s ease ,move2 0.25s ease;
}

#box20:active {
    animation:move1 0.25s ease ,move2 0.25s ease;
}
#box21:active {
    animation:move1 0.25s ease ,move2 0.25s ease;
}
#box22:active {
    animation:move1 0.25s ease ,move2 0.25s ease;
}
#box23:active {
    animation:move1 0.25s ease ,move2 0.25s ease;
}
#box24:active {
    animation:move1 0.25s ease ,move2 0.25s ease;
}
#box25:active {
    animation:move1 0.25s ease ,move2 0.25s ease;
}
#box26:active {
    animation:move1 0.25s ease ,move2 0.25s ease;
}
#box27:active {
    animation:move1 0.25s ease ,move2 0.25s ease;
}
#box28:active {
    animation:move1 0.25s ease ,move2 0.25s ease;
}
#box29:active {
    animation:move1 0.25s ease ,move2 0.25s ease;
}
#box30:active {
    animation:move1 0.25s ease ,move2 0.25s ease;
}
#box31:active {
    animation:move1 0.25s ease ,move2 0.25s ease;
}




@keyframes move1{
    from{opacity: 0}
    to{opacity: 0.6}
}
@keyframes move2 {
    from{opacity: 0.6}
    to{opacity: 0}
}



@media (min-width:1px) and (max-width: 754px){

    .box{
        width: 25%;
        height: 12.5%;
        background: white;
        text-align: center;
        float: left;
        opacity: 0;
    }
}
@media (min-width:755px) and (max-width:10000px){

    .box{
        width: 12.5%;
        height: 25%;
        background: white;
        text-align: center;
        float: left;
        opacity: 0;
    }
}